<template>
  <lay-container
    fluid="true"
    class="treeHeader"
    style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="6">
        <!-- <div class="treeHeader bg-[#78A300] text-[#000] p-[0px_8px]">
            排班管理
          </div> -->
        <lay-card>
          <lay-tree
            :data="treeDataScour"
            style="min-height: 300px"
            :tail-node-icon="false"
            :onlyIconControl="true"
            :default-expand-all="true"
            v-model:selectedKey="selectedKey"
            @node-click="handleClick" />
        </lay-card>
      </lay-col>

      <lay-col :md="6">
        <lay-card>
          <lay-tree
            :data="treeDataScour2"
            style="min-height: 300px"
            :tail-node-icon="false"
            :onlyIconControl="true"
            :default-expand-all="true"
            v-model:selectedKey="selectedKey"
            @node-click="handleClick" />
        </lay-card>
      </lay-col>
      <lay-col :md="6">
        <lay-card>
          <lay-tree
            :data="treeDataScour3"
            style="min-height: 300px"
            :tail-node-icon="false"
            :onlyIconControl="true"
            :default-expand-all="true"
            v-model:selectedKey="selectedKey"
            @node-click="handleClick" />
        </lay-card>
      </lay-col>
      <lay-col :md="6">
        <lay-card>
          <lay-tree
            :data="treeDataScour4"
            :tail-node-icon="false"
            :onlyIconControl="true"
            :default-expand-all="true"
            style="min-height: 300px"
            v-model:selectedKey="selectedKey"
            @node-click="handleClick" />
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
</template>

<script setup>
import { ref } from 'vue';
import router from '@/router';
import { treeData4, treeData3, treeData2, treeData } from './data';
const treeDataScour = ref(treeData)
const treeDataScour2 = ref(treeData2)
const treeDataScour3 = ref(treeData3)
const treeDataScour4 = ref(treeData4)

const handleClick = (node) => {
  console.log(node);
  const { id} = node;
  router.push({
    path:id
  });
};
</script>

<style>
.treeHeader layui-tree-setHide > .layui-tree-entry > .layui-tree-main > .layui-tree-icon {
  display: none;
}
.treeHeader .layui-tree-setHide > .layui-tree-entry .layui-tree-main {
  cursor: default;
  width: 100%;
  background-color: #78a300;
  color: #000;
  padding: 0 12px;
  margin-bottom: 10px;
}
.layui-tree-entry {
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
}
.layui-tree-pack {
}
.layui-tree-entry:hover {
  color: #000 !important;
  background: #eee !important;
}
.layui-tree-txt {
  color: #000 !important;
}
</style>
